<template>
  <div>
    <el-form ref="pageInfo" :inline="true" class="demo-form-inline" :model="pageInfo" align="left">
      <el-form-item>
        <el-select v-model="pageInfo.city" placeholder="选择城市">
          <el-option value="">--选择城市--</el-option>
          <el-option value="2">北京</el-option>
          <el-option value="10">上海</el-option>

          <el-option value="3">天津</el-option>

          <el-option value="23">重庆</el-option>

        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="pageInfo.businessName" placeholder="请输入公寓名" />
      </el-form-item>
      <el-form-item label="起租日期">
        <el-col :span="11">
          <el-date-picker v-model="pageInfo.startDate" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker v-model="pageInfo.endDate" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <div align="right">
        <el-form-item>
          <el-button type="warning" @click="onSubmit">查询</el-button>
          <el-button type="warning" @click="resetForm('pageInfo')">清空</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-tabs v-model="label" type="border-card" stretch>
      <el-tab-pane v-show="label === '1'">
        <span slot="label">收入明细</span>
        <h2 :data="incomeData">
          收入总额总计：{{ incomeData.totalSum }}
          押金（总计）：{{ incomeData.depositSum }}
          租金（总计）：{{ incomeData.rentSum }}
          电费（总计）：{{ incomeData.electricityFeeSum }}
          水费（总计）：{{ incomeData.waterFeeSum }}
          宽带（总计）：{{ incomeData.netFeeSum }}
          燃气费（总计）：{{ incomeData.gasFeeSum }}
          有线电视（总计）：{{ incomeData.cableFeeSum }}
          其他（总计）：{{ incomeData.otherFeeSum }}
        </h2>
        <el-table
          :data="tableData1"
          style="width: 100%"
        >
          <el-table-column
            prop="businessName"
            label="公寓名称"
          />
          <el-table-column
            prop="dealDate"
            label="交易时间"
            :formatter="changeDate"
          />
          <el-table-column
            prop="total"
            label="总计"
          />
          <el-table-column
            prop="deposit"
            label="押金"
          />
          <el-table-column
            prop="rent"
            label="租金"
          />
          <el-table-column
            prop="electricityFee"
            label="电费"
          />
          <el-table-column
            prop="waterFee"
            label="水费"
          />
          <el-table-column
            prop="netFee"
            label="宽带"
          />
          <el-table-column
            prop="gasFee"
            label="燃气费"
          />
          <el-table-column
            prop="cableFee"
            label="有线电视费"
          />
          <el-table-column
            prop="otherFee"
            label="其他"
          />
          <el-table-column
            label="操作"
          >
            <template scope="scope">
              <el-button type="text" style="color: chocolate" @click="showInCome(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
          <h2 :data="gridData2">
            交易日期：{{ gridData2.dealDate }}
            公寓名：{{ gridData2.businessName }}
            总计：{{ gridData2.total }}
          </h2>
          <el-table :data="gridData">
            <el-table-column property="dealDate" label="交易时间" width="150" :formatter="changeDate" />
            <el-table-column property="roomName" label="房源名称" width="200" />
            <el-table-column property="roomName" label="租客姓名" />
            <el-table-column property="tenantPhone" label="租客电话" />
            <el-table-column property="itemType" label="费用类型" />
            <el-table-column property="" label="收支状态" />
            <el-table-column property="realPaymentAmount" label="金额（元）" />
            <el-table-column property="payMethod" label="支付方式" />
          </el-table>
        </el-dialog>
        <el-pagination
          :current-page="pageInfo.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange2"
        />
      </el-tab-pane>
      <el-tab-pane v-show="label === '2'">
        <span slot="label">支出明细</span>
        <h2 :data="outData">
          支出总额总计：{{ outData }}
        </h2>
        <el-table
          :data="tableData2"
          style="width: 100%"
        >
          <el-table-column
            prop="businessName"
            label="公寓名称"
          />
          <el-table-column
            prop="dzDate"
            label="交易时间"
            :formatter="changeDate"
          />
          <el-table-column
            prop="applyType"
            label="交易类型"
          >
            <template scope="scope">
              <span v-if="scope.row.applyType==1">
                <el-button type="text" style="color: blue">充值</el-button>
              </span>
              <span v-if="scope.row.applyType==2">
                <el-button type="text" style="color: red">提现</el-button>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="applyAmount"
            label="金额(元)"
          />
          <el-table-column
            prop="checkUserName"
            label="操作人"
          />
        </el-table>
        <el-pagination
          :current-page="pageInfo.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stretch: false,
      dialogTableVisible: false,
      label: 0,
      tableData1: [],
      tableData2: [],
      incomeData: [],
      outData: [],
      gridData: [],
      gridData2: [{
        dealDate: '',
        businessName: '',
        total: null
      }],
      total: 0,
      pageInfo: {
        businessId: null,
        pageNum: 1,
        pageSize: 10,
        city: '',
        businessName: '',
        startDate: '',
        endDate: ''
      }
    }
  },
  created() {
    this.incomeList()
    this.incomzj()
  },
  mounted() {
    this.outList()
    this.outzj()
  },
  methods: {
    showInCome(sc) {
      this.axios.get('http://localhost:8093/tCwHailianDealPerDay/searchHaiLianIncomeDetailPage?businessName=' + sc.businessName).then(res => {
        console.log(res.data)
        this.gridData = res.data.obj
        this.dialogTableVisible = true
        this.gridData2.dealDate = sc.dealDate
      })
      this.axios.get('http://localhost:8093/tCwHailianDealPerDay/searchHaiLianIncomeDetailSum?businessName=' + sc.businessName).then(res => {
        // console.log(res.data)
        if (res.data.obj == null) {
          this.dialogTableVisible = true
        } else {
          this.gridData2 = res.data.obj
        }
      })
    },
    changeDate(row, column) {
      const date = row[column.property]
      if (date == null) {
        return ''
      }
      return this.moment(date).format('YYYY/MM/DD')
    },
    resetForm(formName) {
      this.pageInfo = {}
    },
    onSubmit() {
      this.incomeList()
      this.outList()
      this.incomzj()
      this.outzj()
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.outList()
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val
      this.outList()
    },
    handleSizeChange1(val) {
      this.pageInfo.pageSize = val
      this.incomeList()
    },
    handleCurrentChange2(val) {
      this.pageInfo.pageNum = val
      this.incomeList()
    },
    incomeList() {
      this.axios.get('http://localhost:8093/tCwHailianDealPerDay/searchHaiLianIncomePage', { params: this.pageInfo }).then(res => {
        console.log(res.data)
        this.tableData1 = res.data.obj.list
        this.total = res.data.obj.total
        this.pageInfo.pageNum = res.data.obj.pageNum
        this.pageInfo.pageSize = res.data.obj.pageSize
      })
    },
    outList() {
      this.axios.get('http://localhost:8093/tCwHailianDealPerDay/selectTxPerDay', { params: this.pageInfo }).then(res => {
        console.log(res.data)
        this.tableData2 = res.data.obj.list
        this.total = res.data.obj.total
        this.pageInfo.pageNum = res.data.obj.pageNum
        this.pageInfo.pageSize = res.data.obj.pageSize
      })
    },
    incomzj() {
      this.axios.get('http://localhost:8093/tCwHailianDealPerDay/searchHaiLianIncomeSum',
        { params: {
          city: this.pageInfo.city,
          businessName: this.pageInfo.businessName
        }
        }).then(res => {
        console.log(res.data)
        this.incomeData = res.data.obj
      })
    },
    outzj() {
      this.axios.get('http://localhost:8093/tCwHailianDealPerDay/getTxSum',
        { params: {
          city: this.pageInfo.city,
          businessName: this.pageInfo.businessName
        }
        }).then(res => {
        this.outData = res.data.obj
      })
    }
  }
}
</script>

<style scoped>

</style>
